<template>
  <div id="orderPoup">
    <div v-if="poupType == 'create'">
      <el-drawer :visible.sync="orderPoupDrawer"
                 jd="outDrawer"
                 style=""
                 direction="rtl"
                 :modal="false"
                 size="600px"
                 :show-close="true"
                 :before-close="PoupClose"
                 :wrapperClosable="true"
                 @close="$emit('closePoup')">
        <div class="drawer-tabs"
             style="overflow: auto">
          <el-tabs v-model="activeName"
                   @tab-click="handleClick">
            <el-tab-pane label="全日房"
                         name="allDay">
              <!-- 基本信息 -->
              <div class="title">基本信息</div>
              <el-form ref="form"
                       :model="form"
                       label-width="40px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="姓名">
                      <el-input v-model="form.basic.name"
                                size="small"
                                placeholder="请输入姓名"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="手机">
                      <el-input v-model="form.basic.phone"
                                size="small"
                                placeholder="请输入手机号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="渠道">
                      <el-select v-model="form.basic.from"
                                 size="small">
                        <el-option v-for="item in qdOptions"
                                   :key="item.channel"
                                   :label="item.channel"
                                   :value="item.channel">
                          <div class="custom-select">
                            <div :style="item.color"></div>
                            <span>{{ item.channel }}</span>
                          </div>
                        </el-option>
                        <div slot="prefix">
                          <div class="custom-select--div"
                               :style="getFromColor"></div>
                        </div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <!-- 日历房间信息 -->
              <div class="title">
                <span>房间信息</span>
                <span>共{{ form.roomList.length }}间房</span>
              </div>
              <div class="flex-benw room-item"
                   v-for="(item, index) in form.roomList"
                   :key="item.id">
                <el-date-picker v-model="item.date"
                                type="date"
                                value-format="yyyy-MM-dd"
                                style="width: 150px"
                                size="small">
                </el-date-picker>
                <el-popover>
                  <el-input-number v-model="item.day.length"
                                   size="mini"></el-input-number>
                  <el-button readonly
                             slot="reference"
                             :value="`${item.day.length}晚`"
                             style="width: 68px"
                             size="small">{{item.day.length}}晚</el-button>
                </el-popover>

                <el-cascader @change="onChangeCascader"
                             v-model="item.roomId"
                             style="width: 150px"
                             size="small"
                             label="name"
                             value="id"
                             :options="roomType"></el-cascader>

                <el-input readonly
                          prefix-icon="el-icon-my-money"
                          :value="getTotalPrice(item.price
)"
                          style="width: 80px"
                          size="small">
                  <i slot="prefix"
                     class="element-icons el-icon-el-icon-renminbi"></i>
                </el-input>
                <el-button type="text"
                           @click="Check_in_information"
                           class="people">
                  入住人
                </el-button>
                <i class="el-icon-delete delete-icon"
                   @click="deleteItem('room', index)"></i>
              </div>
              <div>
                <el-button type="primary"
                           plain
                           size="small"
                           icon="el-icon-plus"
                           @click="addNewRoom">添加房间
                </el-button>
                <el-button type="text"
                           size="small"
                           icon="el-icon-plus"
                           @click="addCost">添加消费</el-button>
              </div>

              <!-- 消费信息 -->
              <div class="title"
                   v-if="form.consume_info.length">消费信息</div>
              <div>
                <div class="flex-benw room-item"
                     v-for="(item, index) in form.consume_info"
                     :key="item.id">
                  <el-select style="width: 150px"
                             size="small"
                             v-model="item.name"
                             placeholder="请选择消费项目">
                    <el-option :label="item.name"
                               v-for="item in AddPayFormOptions"
                               :key="item.id"
                               :value="item.name"> </el-option>
                  </el-select>

                  <el-input readonly
                            :value="`${item.num}份`"
                            style="width: 68px"
                            size="small"></el-input>
                  <el-popover placement="bottom"
                              popper-class="popoverColor"
                              title="标题"
                              width="200"
                              trigger="click"
                              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <el-input v-model="item.price"
                              prefix-icon="el-icon-my-money"
                              style="width: 100px"
                              size="small">
                      <i slot="prefix"
                         class="icon-jiage iconfont price-icon"></i>
                    </el-input>
                  </el-popover>

                  <el-date-picker v-model="item.date"
                                  type="date"
                                  style="width: 150px"
                                  value-format="yyyy-MM-dd"
                                  size="small">
                  </el-date-picker>
                  <el-input v-model="item.price"
                            prefix-icon="el-icon-my-money"
                            style="width: 80px"
                            size="small">
                    <i slot="prefix"
                       class="icon-jiage iconfont price-icon"></i>
                  </el-input>
                  <el-popover placement="top"
                              trigger="click">
                    <el-input type="textarea"
                              maxlength="300"
                              v-model="item.remarks"
                              style="width:300px;"></el-input>
                    <el-button class="remark"
                               type="text"
                               slot="reference"
                               @click="test(item)">备注</el-button>
                  </el-popover>
                  <i class="el-icon-delete delete-icon"
                     @click="deleteItem('cost', index)"></i>
                </div>
              </div>

              <!-- 收款信息 -->
              <div class="title">收款信息</div>
              <div class="flex-benw room-item"
                   v-for="(item, index) in form.pay_info"
                   :key="item.id">
                <el-select v-model="item.type"
                           style="width: 110px"
                           size="small">
                  <el-option label="收款"
                             :value="1"> </el-option>
                  <el-option label="收押金"
                             :value="2"> </el-option>
                </el-select>
                <el-select v-model="item.pay_type"
                           style="width: 135px"
                           size="small">
                  <el-option v-for="item in Paymethod_options"
                             :key="item.name"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
                <el-input v-model="item.price"
                          prefix-icon="el-icon-my-money"
                          style="width: 80px"
                          size="small">
                  <i slot="prefix"
                     class="icon-jiage iconfont price-icon"></i>
                </el-input>
                <el-date-picker v-model="item.date"
                                type="date"
                                value-format="yyyy-MM-dd"
                                style="width: 130px"
                                size="small">
                </el-date-picker>
                <el-popover placement="top"
                            trigger="click">
                  <el-input type="textarea"
                            maxlength="300"
                            v-model="item.remarks"
                            style="width:300px;"></el-input>
                  <el-button class="remark"
                             type="text"
                             slot="reference"
                             @click="test(item)">备注</el-button>
                </el-popover>

                <i class="el-icon-delete delete-icon"
                   @click="deleteItem('pay', index)"></i>
              </div>
              <div>
                <el-button type="text"
                           size="small"
                           icon="el-icon-plus"
                           @click="addPay">添加收款</el-button>
              </div>

              <!-- 订单提醒 -->
              <div class="title">订单提醒</div>
              <div class="remind">
                <div class="remind-item"
                     v-for="(item, index) in form.messages"
                     :key="item.id">
                  <div class="detail">
                    <span>{{ item.time }}</span>
                    <span>{{ item.content }}</span>
                  </div>
                  <div class="operate">
                    <i class="el-icon-edit"
                       @click="edit_remark(item)"></i>
                    <i class="el-icon-delete"
                       @click="deleteItem('tip', index)"></i>
                  </div>
                </div>
              </div>
              <div>
                <el-button type="text"
                           size="small"
                           icon="el-icon-plus"
                           @click="addTips">添加提醒</el-button>
              </div>

              <!-- 备注 -->
              <div class="title">备注</div>
              <div class="desc">
                <el-input type="textarea"
                          v-model="val"
                          :show-word-limit="true"
                          :autosize="{ minRows: 5, maxRows: 10 }"
                          placeholder="请输入内容">
                </el-input>
              </div>
            </el-tab-pane>

            <el-tab-pane label="钟点房"
                         name="hour_room">
              <div class="title">基本信息</div>
              <el-form ref="form"
                       :model="hourRoom"
                       label-width="40px">
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item label="姓名">
                      <el-input v-model="hourRoom.basic.name"
                                size="small"
                                placeholder="请输入姓名"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="手机">
                      <el-input v-model="hourRoom.basic.phone"
                                size="small"
                                placeholder="请输入手机号"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="渠道">
                      <el-select v-model="hourRoom.basic.from"
                                 size="small">
                        <el-option v-for="item in qdOptions"
                                   :key="item.channel"
                                   :label="item.channel"
                                   :value="item.channel">
                          <div class="custom-select">
                            <div :style="item.color"></div>
                            <span>{{ item.channel }}</span>
                          </div>
                        </el-option>
                        <div slot="prefix">
                          <div class="custom-select--div"
                               :style="getFromColor"></div>
                        </div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <!-- 单日房间信息 -->
              <div class="title">
                <span>房间信息</span>
                <span>共{{ hourRoom.roomList.length }}间房</span>
              </div>
              <div class="flex-benw room-item"
                   v-for="(item, index) in hourRoom.roomList"
                   :key="item.id">
                <el-date-picker v-model="item.date"
                                type="date"
                                value-format="yyyy-MM-dd"
                                style="width: 150px"
                                size="small">
                </el-date-picker>
                <el-input readonly
                          :value="`${item.day.length}晚`"
                          style="width: 68px"
                          size="small">

                  <el-popover placement="bottom"
                              title="标题"
                              width="200"
                              trigger="click"
                              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <el-button slot="reference">click 激活</el-button>
                  </el-popover>

                </el-input>
                <el-cascader @change="onChangeCascader"
                             v-model="item.roomId"
                             style="width: 150px"
                             size="small"
                             label="name"
                             value="id"
                             :options="roomType"></el-cascader>

                <el-input readonly
                          :value="getTotalPrice(item.price
)"
                          style="width: 80px"
                          prefix-icon="el-icon-my-money"
                          size="small">

                  <i slot="prefix"
                     class="icon-jiage iconfont price-icon"></i>
                </el-input>
                <div class="people">
                  入住人
                </div>
                <i class="el-icon-delete delete-icon"
                   @click="deleteItem('room', index)"></i>
              </div>
              <div>
                <el-button type="primary"
                           plain
                           size="small"
                           icon="el-icon-plus"
                           @click="addNewRoom">添加房间
                </el-button>
                <el-button type="text"
                           size="small"
                           icon="el-icon-plus"
                           @click="addCost">添加消费</el-button>
              </div>

              <!-- 消费信息 -->
              <div class="title"
                   v-if="hourRoom.consume_info.length">消费信息</div>
              <div>
                <div class="flex-benw room-item"
                     v-for="(item, index) in hourRoom.consume_info"
                     :key="item.id">
                  <el-select style="width: 150px"
                             size="small"
                             v-model="item.name"
                             placeholder="请选择消费项目">
                    <el-option :label="item.name"
                               v-for="item in AddPayFormOptions"
                               :key="item.id"
                               :value="item.name"> </el-option>
                  </el-select>

                  <el-input readonly
                            :value="`${item.num}份`"
                            style="width: 68px"
                            size="small"></el-input>
                  <el-popover placement="bottom"
                              title="标题"
                              width="200"
                              trigger="click"
                              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <el-input v-model="item.price"
                              prefix-icon="el-icon-my-money"
                              style="width: 100px"
                              size="small">
                      <i slot="prefix"
                         class="icon-jiage iconfont price-icon"></i>
                    </el-input>
                  </el-popover>

                  <el-date-picker v-model="item.time"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  style="width: 150px"
                                  size="small">
                  </el-date-picker>
                  <el-input v-model="item.price"
                            prefix-icon="el-icon-my-money"
                            style="width: 80px"
                            size="small">
                    <i slot="prefix"
                       class="icon-jiage iconfont price-icon"></i>
                  </el-input>
                  <el-popover placement="top"
                              trigger="click">
                    <el-input type="textarea"
                              maxlength="300"
                              v-model="item.remarks"
                              style="width:300px;"></el-input>
                    <el-button class="remark"
                               type="text"
                               slot="reference"
                               @click="test(item)">备注</el-button>
                  </el-popover>
                  <i class="el-icon-delete delete-icon"
                     @click="deleteItem('cost', index)"></i>
                </div>
              </div>

              <!-- 收款信息 -->
              <div class="title">收款信息</div>
              <div class="flex-benw room-item"
                   v-for="(item, index) in hourRoom.pay_info"
                   :key="item.id">
                <el-select v-model="item.type"
                           style="width: 110px"
                           size="small">
                  <el-option label="收款"
                             :value="3"> </el-option>
                  <el-option label="收押金"
                             :value="5"> </el-option>
                </el-select>
                <el-select v-model="item.pay_type"
                           style="width: 135px"
                           size="small">
                  <el-option v-for="item in payMethodOptions"
                             :key="item.value"
                             :label="item.label"
                             :value="item.label">
                  </el-option>
                </el-select>
                <el-input v-model="item.price"
                          prefix-icon="el-icon-my-money"
                          style="width: 80px"
                          size="small">
                  <i slot="prefix"
                     class="icon-jiage iconfont price-icon"></i>
                </el-input>
                <el-date-picker v-model="item.date"
                                type="date"
                                value-format="yyyy-MM-dd"
                                style="width: 130px"
                                size="small">
                </el-date-picker>
                <span class="remark">备注</span>
                <i class="el-icon-delete delete-icon"
                   @click="deleteItem('pay', index)"></i>
              </div>
              <div>
                <el-button type="text"
                           size="small"
                           icon="el-icon-plus"
                           @click="addPay">添加收款</el-button>
              </div>

              <!-- 订单提醒 -->
              <div class="title">订单提醒</div>
              <div class="remind">
                <div class="remind-item"
                     v-for="(item, index) in hourRoom.messages"
                     :key="item.id">
                  <div class="detail">
                    <span>{{ item.time }}</span>
                    <span>{{ item.content }}</span>
                  </div>
                  <div class="operate">
                    <i class="el-icon-edit"></i>
                    <i class="el-icon-delete"
                       @click="deleteItem('tip', index)"></i>
                  </div>
                </div>
              </div>
              <div>
                <el-button type="text"
                           size="small"
                           icon="el-icon-plus"
                           @click="addTips">添加提醒</el-button>
              </div>

              <!-- 备注 -->
              <div class="title">备注</div>
              <div class="desc">
                <el-input type="textarea"
                          v-model="val"
                          :show-word-limit="true"
                          :autosize="{ minRows: 5, maxRows: 10 }"
                          placeholder="请输入内容">
                </el-input>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="total-price">
          <span>
            <span class="price-title">订单金额：</span>
            <span class="price-total">￥48700.00</span>
          </span>
          <span>
            <el-button>取消</el-button>
            <el-button type="primary"
                       @click="submitOrder">提交订单</el-button>
          </span>
        </div>
        <el-drawer :append-to-body="true"
                   class="inner_drawer"
                   :visible.sync="innerDrawer"
                   :before-close="handleClose"
                   size="600px">
          <template slot="title">
            <div style="line-height: 58px">
              <el-button type="text"
                         class="returnBtn"
                         @click="back">
                <i class="el-icon-back"></i>
                返回
              </el-button>
              <span style="margin-left: 10px; color: black">{{form.innerTitle}}</span>
            </div>
          </template>
          <!-- 添加入住人 -->
          <div class="inner_body"
               v-show="form.innerForm_person.show==true"
               v-for="(item) in form.innerForm_person"
               :key="item.id">
            <div class="time"
                 style="padding-left: 24px; padding-right: 24px; background: #f2f3f6">
              <span class="text-tip">{{ item.time}}</span>
              <span class="text-tip"
                    style="max-width: 200px; word-break: break-all">{{ item.RoomType }}</span>
              <span class="text-tip">{{ item.money }}</span>
            </div>
            <span style="margin-left: 20px">入住人姓名必填</span>
            <el-form ref="form"
                     :model="form">
              <div class="inner-info">
                <el-input class="name"
                          style="border-radius: 20px;"
                          v-model="item.name"></el-input>
                <el-input class="phone"
                          v-model="item.phone"></el-input>
                <el-select v-model="item.card"
                           placeholder="请选择">
                  <el-option v-for="item in card"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
                <el-input class="id"
                          v-model="item.phone"></el-input>
              </div>
            </el-form>
          </div>
          <div class="inner_body"
               v-show="form.messages.show==true">
            <el-form ref="form"
                     :model="form"
                     v-for="item in form.messages "
                     :key="item.id">
              <el-form-item label="提醒时间">
                <el-input v-model="item.time"></el-input>
              </el-form-item>
              <el-form-item label="提示内容">
                <el-input type="textarea"
                          style="width: 500px;"
                          v-model="item.content"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-drawer>
      </el-drawer>

    </div>
    <div v-if="poupType == 'editOrder'"
         class="editPoup">
      <el-drawer :visible.sync="orderPoupDrawer"
                 @open="editOrderInfo"
                 jd="outDrawer"
                 direction="rtl"
                 size="600px"
                 :show-close="true"
                 :before-close="PoupClose"
                 :wrapperClosable="true"
                 @close="$emit('closePoup')">
        <template slot="title">
          <div class="bt">
            <el-button @click="GoBack"
                       type="text"
                       style="
                  display: inline-block;
                  width: 88px;
                  line-height: 17px;
                  border-radius: 0 100px 100px 0;
                  background: #f5f7fd;
                  margin-left: -24px;
                  -webkit-box-flex: unset !important;
                  -ms-flex: unset !important;
                  flex: unset !important;
                  text-align: center;
                "><i class="el-icon-back"
                 style="margin-right: 10px"></i>返回</el-button>
            <div style="
                  line-height: 34px;
                  margin-left: 20px;
                  display: inline-block;
                ">
              修改订单12311
            </div>
          </div>
        </template>
        <!-- 基本信息 -->
        <div class="editBody">
          <div>
            <div class="title">基本信息</div>
            <el-form ref="form"
                     class="pad-24px"
                     :model="form"
                     label-width="40px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名">
                    <el-input v-model="form.basic.name"
                              size="small"
                              placeholder="请输入姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机">
                    <el-input v-model="form.basic.phone"
                              size="small"
                              placeholder="请输入手机号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="渠道">
                    <el-select v-model="form.basic.from"
                               size="small">
                      <el-option v-for="item in qdOptions"
                                 :key="item.channel"
                                 :label="item.channel"
                                 :value="item.channel">
                        <div class="custom-select">
                          <div :style="item.color"></div>
                          <span>{{ item.channel }}</span>
                        </div>
                      </el-option>
                      <div slot="prefix">
                        <div class="custom-select--div"
                             :style="getFromColor"></div>
                      </div>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <el-divider></el-divider>
          <!-- 日历房间信息 -->
          <div class="pad-24px">
            <div class="title">
              <span>房间信息</span>
              <span>共{{ form.roomList.length }}间房</span>
            </div>

            <div class="flex-benw room-item"
                 v-for="(item, index) in form.roomList"
                 :key="item.id">
              <el-date-picker v-model="item.inTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              style="width: 150px"
                              size="small">
              </el-date-picker>
              <el-input readonly
                        :value="`${item.day.length}晚`"
                        style="width: 68px"
                        size="small"></el-input>
              <el-cascader @change="onChangeCascader"
                           v-model="item.roomId"
                           style="width: 150px"
                           size="small"
                           label="name"
                           value="id"
                           :options="AllRoomType"></el-cascader>

              <el-input readonly
                        prefix-icon="el-icon-my-money"
                        :value="getTotalPrice(item.price)"
                        style="width: 80px"
                        size="small">
                <i slot="prefix"
                   class="icon-jiage iconfont price-icon"></i>
              </el-input>
              <el-button type="text"
                         @click="Check_in_information"
                         class="people">
                入住人
              </el-button>
              <i class="el-icon-delete delete-icon"
                 @click="deleteItem('room', index)"></i>
            </div>
            <div>
              <el-button type="primary"
                         plain
                         size="small"
                         icon="el-icon-plus"
                         @click="addNewRoom">添加房间
              </el-button>
              <el-button type="text"
                         size="small"
                         icon="el-icon-plus"
                         @click="addCost">添加消费</el-button>
            </div>
          </div>
          <el-divider></el-divider>
          <!-- 消费信息 -->
          <div class="pad-24px">
            <div class="title"
                 v-if="form.consume_info.length">消费信息</div>
            <div>
              <div class="flex-benw room-item"
                   v-for="(item, index) in form.consume_info"
                   :key="item.id">
                <el-select style="width: 150px"
                           size="small"
                           v-model="item.name"
                           placeholder="请选择消费项目">
                  <el-option :label="item.name"
                             v-for="item in AddPayFormOptions"
                             :key="item.id"
                             :value="item.name"> </el-option>
                </el-select>

                <el-input readonly
                          :value="`${item.num}份`"
                          style="width: 68px"
                          size="small"></el-input>
                <el-popover placement="bottom"
                            popper-class="popoverColor"
                            title="标题"
                            width="200"
                            trigger="click"
                            content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                  <el-input v-model="item.price"
                            style="width: 100px"
                            size="small">
                    <i slot="prefix"
                       class="icon-jiage iconfont price-icon"></i>
                  </el-input>
                </el-popover>
                <el-date-picker v-model="item.date"
                                type="date"
                                value-format="yyyy-MM-dd"
                                style="width: 150px"
                                size="small">
                </el-date-picker>
                <el-input v-model="item.price"
                          style="width: 80px"
                          size="small">
                  <i slot="prefix"
                     class="icon-jiage iconfont price-icon"></i>
                </el-input>
                <span class="remark">备注</span>
                <i class="el-icon-delete delete-icon"
                   @click="deleteItem('cost', index)"></i>
              </div>
            </div>
          </div>
          <el-divider v-if="form.consume_info.length"></el-divider>
          <!-- 收款信息 -->
          <div class="pad-24px">
            <div class="title">收款信息</div>
            <div class="flex-benw room-item"
                 v-for="(item, index) in form.pay_info"
                 :key="item.id">
              <el-select v-model="item.type"
                         style="width: 110px"
                         size="small">
                <el-option label="收款"
                           :value="1"> </el-option>
                <el-option label="收押金"
                           :value="2"> </el-option>
              </el-select>
              <el-select v-model="item.pay_type"
                         style="width: 135px"
                         size="small">
                <el-option v-for="item in payMethodOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
              <el-input v-model="item.price"
                        style="width: 80px"
                        size="small">
                <i slot="prefix"
                   class="icon-jiage iconfont price-icon"></i>
              </el-input>
              <el-date-picker v-model="item.date"
                              type="date"
                              value-format="yyyy-MM-dd"
                              style="width: 130px"
                              size="small">
              </el-date-picker>
              <el-popover placement="top"
                          trigger="click">
                <el-input type="textarea"
                          maxlength="300"
                          style="width:300px;"></el-input>
                <el-button class="remark"
                           type="text"
                           slot="reference"
                           @click="test(item)">备注</el-button>
              </el-popover>

              <i class="el-icon-delete delete-icon"
                 @click="deleteItem('pay', index)"></i>
            </div>

            <div>
              <el-button type="text"
                         size="small"
                         icon="el-icon-plus"
                         @click="addPay">添加收款</el-button>
            </div>
          </div>
          <el-divider></el-divider>
          <!-- 订单提醒 -->
          <div class="pad-24px">
            <div class="title">订单提醒</div>
            <div class="remind">
              <div class="remind-item"
                   v-for="(item, index) in form.messages"
                   :key="item.id">
                <div class="detail">
                  <span>{{ item.time }}</span>
                  <span>{{ item.content }}</span>
                </div>
                <div class="operate">
                  <i class="el-icon-edit"
                     @click="edit_remark(item)"></i>
                  <i class="el-icon-delete"
                     @click="deleteItem('tip', index)"></i>
                </div>
              </div>
            </div>
            <div>
              <el-button type="text"
                         size="small"
                         icon="el-icon-plus"
                         @click="addTips">添加提醒</el-button>
            </div>
          </div>
          <el-divider></el-divider>
          <!-- 备注 -->
          <div class="pad-24px">
            <div class="title">备注</div>
            <div class="desc">
              <el-input type="textarea"
                        v-model="val"
                        :show-word-limit="true"
                        :autosize="{ minRows: 5, maxRows: 10 }"
                        placeholder="请输入内容">
              </el-input>
            </div>
          </div>

        </div>
        <el-divider></el-divider>
        <!-- 底部 -->
        <div class="total-price">
          <span>
            <span class="price-title">订单金额：</span>
            <span class="price-total">￥48700.00</span>
          </span>
          <span>
            <el-button>取消</el-button>
            <el-button type="primary"
                       @click="submitOrder">保存</el-button>
          </span>
        </div>
      </el-drawer>
    </div>

  </div>
</template>

<script>
import { v4 as uuid } from 'uuid'
import dayjs from 'dayjs'
import { cloneDeep } from 'lodash'
import { PMS_order } from '@api/hotel'
import { consume } from '@/api/consume'
import { PayChannel } from '@/api/PaymentMethodSetting'

export default {

  components: {
  },
  computed: {
    // 处理订单来了
    getFromColor () {
      if (this.poupType == 'create') {
        // console.log("getFromColor", this.order);
        // this.form.roomList.date = this.order.date
        // this.order.forEach(item => {
        //   item.date = item.date;
        //   item.price = item.sale_price;
        // });
        for (let i = 0; i < this.order.length; i++) {
          for (let j = 0; j < this.roomType.length; j++) {
            if (this.order[i].room_title == this.roomType[j].label) {
              this.order[i].roomId = []
              this.order[i].roomId.push(this.roomType[j].value, this.order[i].room_num)
            }
          }
        }


        // console.log(this.form.roomList);
        // this.order.forEach(item => {
        //   console.log(item);
        // })
        // console.log(this.form.roomList, "roomList====")
        const targetItem = this.qdOptions.find(
          (item) => item.channel == this.form.basic.from
        )
        this.form.roomList = []
        this.order.forEach(item => {
          console.log(item);
          item.day = []
          let data = {
            id: item.id,
            time: item.date,
            value: item.sale_price
          }
          item.price = []
          item.price.push(data)
          item.day.push(item.date)
          this.form.roomList.push(item)
        })
        return targetItem.color
      }

    },

    getData () {
      // console.log("====getData", this.order);
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      this.form.roomList.length = 0
      // let time = this.selectTime.split('-')
      // console.log(time, "=====time======");
      const orderData = this.order
      // const orderData = this.order.map((item) => {
      //   console.log(item, "===item====");
      //   // 给数据添加年限
      //   if (!item.date.includes(time[0])) {
      //     item.date = time[0]+ item.date
      //   }
      //   return item
      // })
      // 处理数据
      const roomMap = new Map()
      // 深拷贝数据
      const copyOrder = cloneDeep(orderData)
      //  根据房间号做一个归类
      copyOrder.forEach((order) => {
        let mapOrderList = [order]
        if (roomMap.has(order.roomId)) {
          mapOrderList = roomMap.get(order.roomId).concat(order)
        } else {
        }
        roomMap.set(order.roomId, mapOrderList)
      })
      const timeGroup = new Map()
      const records = {}
      // 根据时间做一个排序
      for (let [key, value] of roomMap) {
        value = value.sort((a, b) => (a.date > b.date ? 1 : -1))
        // 需要根据时间连续的进行分组
        for (let index = 0; index < value.length; index++) {
          const key = `${value[index].date}--${value[index].roomId}`
          if (index == 0) {
            // 第一天不做计算
            timeGroup.set(key, [value[index]])
            records[key] = key
          } else {
            const lastKey = `${value[index - 1].date}--${value[index - 1].roomId
              }`
            // 比较两个时间是否相差一天
            const diffDay = dayjs(value[index].date).diff(
              value[index - 1].date,
              'day'
            )
            if (diffDay == 1) {
              // 记录上一次最小时间
              records[key] = records[lastKey]
              //   // 重新赋值
              timeGroup.set(
                records[key],
                timeGroup.get(records[key]).concat([value[index]])
              )
            } else {
              timeGroup.set(key, [value[index]])
            }
          }
        }
      }
      console.log(timeGroup, 999999999)
      for (let [key, value] of timeGroup) {
        // 找到房间类型
        const roomT = this.roomType.find(
          (item) => item.label == value[0].roomType
        )

        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.form.roomList.push({
          id: null,
          date: key.split('--')[0],
          day: value.map((item) => item.date),
          roomId: [roomT.value, value[0].roomId],
          price: value.map((item) => {
            return {
              id: null,
              time: item.date,
              day_of_week: this.week[dayjs(item.date).day()],
              value: item.date,
            }
          }),
        })
      }

      console.log(roomMap)
      console.log(timeGroup)
      console.log(copyOrder)
      return orderData
    },
  },
  props: {
    data: Array,
    roomType: Array,
    order: Array,
    selectTime: String,
    orderPoupDrawer: Boolean,
    poupType: String,
  },
  data () {
    return {
      Paymethod_options: null,

      activeName: 'allDay',
      val: '',
      orderTipShow: true,
      innerDrawer: false,

      card: [
        {
          value: '选项1',
          label: '身份证'
        },
        {
          value: '选项2',
          label: '通行证'
        }
      ],
      week: [
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      ],

      qdOptions: [
        {
          channel: '携程',
          color: 'background-color:#A69340',
        },
        {
          channel: '途家',
          color: 'background-color:#FD8137',
        },
        {
          channel: 'Booking',
          color: 'background-color:#333333',
        },
        {
          channel: '小红书',
          color: 'background-color:#f40a0b',
        },
        {
          channel: '本地',
          color: 'background-color:#409eff',
        },
      ],
      payMethodOptions: [
        {
          label: '收款码',
          value: 1,
        },
        {
          label: '扫码付',
          value: 2,
        },
        {
          label: '飞猪代收',
          value: 3,
        },
        {
          label: '美团酒店代收',
          value: 4,
        },
        {
          label: '美团民俗代收',
          value: 5,
        },
      ],
      hourRoom: {
        basic: {
          //姓名
          name: '钟点房',
          // 手机
          phone: '18888888888',
          // 渠道
          from: '小红书',
        },
        roomList: [
          {
            date: '2022-10-11',
            day: ['2022-10-10', '2022-10-11'],
            roomId: ['room-type-1', 202],
            price: [
              {
                id: null,
                time: '2022-10-10',
                day_of_week: '星期一',
                value: 100,
              },
              {
                id: null,
                time: '2022-10-11',
                day_of_week: '星期二',
                value: 600,
              },
            ],
          },
        ],
        consume_info: [],
        pay_info: [
          {
            type: '请选择收款/收押金',
            pay_type: '请选择',
            price: 100,
            date: new Date().getUTCFullYear() + '-' + (new Date().getUTCMonth() + 1) + '-' + new Date().getDate(),
            remarks: '',
          },
        ],
        messages: [
          {
            id: null,
            time: '2022-10-11',
            content: '消息提示',
          },
        ],
      },

      form: {
        innerTitle: '',
        basic: {
          //姓名
          name: '张三',
          // 手机
          phone: '18888888888',
          // 渠道
          from: '本地',
        },
        roomList: [
          {
            id: null,
            date: '2023-10-12',
            day: ['2023-10-10', '2023-10-11'],
            roomId: ['title-1', "202"],
            price: [
              {
                id: null,
                time: '2022-10-10',
                day_of_week: '星期一',
                value: 100,
              },
              {
                id: null,
                time: '2022-10-11',
                day_of_week: '星期二',
                value: 700,
              },
            ],
          },
        ],
        consume_info: [],
        innerForm_person: [
          {
            show: false,
            time: '入住时间：02-22',
            RoomType: '101/豪华大床房',
            money: '¥2000.00',
            name: '李大为',
            phone: '',
            card: '',
            id: ''
          },
        ],
        pay_info: [
          {
            type: '请选择收款/收押金',
            pay_type: '请选择',
            price: 100,
            date: new Date().getUTCFullYear() + '-' + (new Date().getUTCMonth() + 1) + '-' + new Date().getDate(),
            remarks: '',
          },
        ],
        messages: [
          {
            id: null,
            time: '2022-10-11',
            content: '消息提示',
          },
        ],
      },
    }
  },
  created () {
    // this.orderFrom()
    this.GetConsume()
    this.GetPayChannel()
    this.editOrderInfo()
  },
  methods: {
    // 获取收款方式
    async GetPayChannel () {
      let data = {
        hotel_id: sessionStorage.getItem("hotel_id"),
      }

      await PayChannel("GET", data).then(res => {
        this.Paymethod_options = res.data.data.list
        console.log(this.Paymethod_options, "收款方式");
      })
    },
    // 获取消费项
    async GetConsume () {
      let data = {
        hotel_id: sessionStorage.getItem("hotel_id"),
      }
      await consume(data, 'GET').then(res => {
        this.AddPayFormOptions = res.data.data.list
        console.log(this.AddPayFormOptions, "获取消费项");
      })
    },
    GoBack () {
      console.log("点击了返回");
      this.$emit('closeOrderPoupDraw', false)
    },
    // 替换from数据
    orderFrom () {
      if (this.poupType == 'create') {
        console.log(this.order, " ==============this.order");


      }
    },
    mouseover () {
      let roomHover = document.querySelector('body')
      roomHover.style.cursor = ` pointer`
    },
    mouseLeave () {
      let roomHover = document.querySelector('body')
      roomHover.style.cursor = ` auto`
    },
    back () {
      console.log("点击了返回");
      this.form.innerForm_person.show = false
      this.form.messages.show = false
      this.innerDrawer = false
    },
    test () {
      console.log('点击了备注');
    },
    PoupClose () {
      console.log("点击了关闭");
      this.$emit('closeOrderPoupDraw', false)
    },
    handleClose () {
      this.form.innerForm_person.show = false
      this.form.messages.show = false
      this.innerDrawer = false

    },
    Check_in_information () {
      this.form.innerTitle = "入住人信息"
      this.innerDrawer = true
      this.form.innerForm_person.show = true
    },
    /**
     * 添加提醒
     */
    addTips () {
      this.form.messages.push({
        id: null,
        time: new Date().toLocaleDateString(),
        content: 'xxx',
      })
    },
    /**
     * 添加消费
     */
    addCost () {
      this.form.consume_info.push({
        name: '',
        num: 1,
        price: null,
        date: new Date().getUTCFullYear() + '-' + (new Date().getUTCMonth() + 1) + '-' + new Date().getDate(),
        remarks: '',
      })
    },
    /**
     * 添加收款
     */
    addPay () {
      this.form.pay_info.push({
        type: '请选择收款/收押金',
        method: 1,
        price: 100,
        date: new Date().getUTCFullYear() + '-' + (new Date().getUTCMonth() + 1) + '-' + new Date().getDate(),
        remarks: '',
      })
    },
    /**
     * 删除
     * @param {*} type 类型 cost消费 room房间  pay收款 tip提示
     * @param {*} index
     */
    deleteItem (type, index) {
      switch (type) {
        case 'cost':
          this.form.consume_info.splice(index, 1)
          break
        case 'room':
          this.form.roomList.splice(index, 1)
          break
        case 'tip':
          this.form.messages.splice(index, 1)
          break
        case 'pay':
          this.form.pay_info.splice(index, 1)
          break
        default:
          break
      }
    },
    edit_remark (item) {
      this.innerDrawer = true
      this.form.innerTitle = '修改提醒'
      this.form.messages.show = true
      console.log('点击了修改', item);
    },
    onChangeCascader (e) {
      console.log(e)
    },

    addNewRoom () {
      console.log('添加房间')

      this.form.roomList.push({
        id: null,
        date: new Date(),
        day: [new Date()],
        roomId: [],
        price: [
          {
            id: null,
            time: new Date(),
            day_of_week: '星期一',
            value: 123,
          },
        ],
      })
    },
    /**
     * 计算总体价格
     * @param {*} priceList
     */
    getTotalPrice (priceList) {
      // console.log(priceList, "priceList");
      const total = priceList.reduce((total, current) => {
        // console.log(total, current);
        total += Number.parseInt(current.value)
        return total
      }, 0)
      return total
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    async submitOrder () {
      console.log("提交订单");
      // console.log(this.form);
      let from //渠道
      if (this.form.basic.from == '本地') {
        from = 1
      }
      let room_info = []
      this.form.roomList.forEach(item => {
        room_info.push({
          room_num_id: item.id,
          start_date: item.date,
          day: item.day.length,
          people: [],
          price: item.sale_price
        })
      })
      let is_hour_room
      if (this.activeName == 'allDay') {
        is_hour_room = 0
      } else if (this.activeName == 'hour_room') {
        is_hour_room = 1
      }
      let data = {
        hotel_id: sessionStorage.getItem("hotel_id"),
        name: this.form.basic.name,
        phone: this.form.basic.phone,
        channel_id: from,
        room_info: room_info,
        is_hour_room: is_hour_room,
        consume_info: this.form.consume_info,
        pay_info: this.form.pay_info
      }
      // console.log(data);
      await PMS_order(data).then(res => {
        // console.log(res.data.code);
        if (res.data.code == 200) {
          this.$message({
            message: res.data.message,
            type: 'success'
          });
          this.$emit('GetRoom')
        } else if (res.data.code == 500) {
          this.$message({
            message: res.data.message,
            type: 'error'
          });
        } else if (res.data.code == 400) {
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped src="./order-poup.scss"></style>
